<template>
    <div class="">
        <div class="flex flex-wrap borders">
            <el-button @click="onButtonClick(item)" v-for="(item, index) in state.headersData" :key="index"
                :type="state.indexValue == item.id ? 'primary' : ''" style="margin-bottom: 16px;">{{ item.label
                }}</el-button>
        </div>
        <div class="drawer_mains">
            <div class="flex marginBottom16 aic" v-for="(item, index) in state.datas" :key="index">
                <p class="fonts16" style="width: 120px;">{{ item.label }}</p>
                <div class="">
                    <el-select v-if="item.type == 'select'" class="margin-left16" clearable v-model="item.value"
                        :placeholder="item.label" style="width: 250px;">
                        <el-option v-for="items in item.options" clearable :key="items.dictValue"
                            :label="items.dictLabel" :value="items.dictValue" />
                    </el-select>
                    <el-date-picker style="width: 250px;" v-if="item.type == 'dateTime'" v-model="item.value" clearable
                        type="datetime" :placeholder="item.label" format="YYYY-MM-DD HH:mm"
                        value-format="YYYY-MM-DD HH:mm:ss" />
                    <el-input style="width: 250px;" v-if="item.type == 'input'" allow-create v-model="item.value"
                        :placeholder="item.label" clearable />
                    <el-cascader style="width: 250px;" v-if="item.type == 'cascader'" clearable v-model="item.value"
                        :placeholder="item.label" :options="item.options" :props="item.props" />
                </div>
                <div class="marginLeft16">
                    <el-icon :size="20" v-if="state.indexValue != 0">
                        <CirclePlus @click="add(item)" />
                    </el-icon>
                    <el-icon :size="20" v-if="state.indexValue == 0">
                        <Remove @click="remove(item)" />
                    </el-icon>
                </div>
            </div>
        </div>
        <div class="flex footer_darwer">
            <el-button @click="close()">取消</el-button>
            <el-button type="primary" @click="sure()">保存</el-button>
        </div>
    </div>
</template>

<script lang="tsx" setup>
import { deptTreeList } from "@/api/organizational/index"
import { dictSect } from "@/utils/dictUnit"
import { CirclePlus, Remove } from '@element-plus/icons-vue'
import { ref, reactive, watch, nextTick, onMounted } from 'vue'
import { ElButton, ElInput, ElMessage, ElMessageBox, ElSwitch, ElLoading } from 'element-plus'
import { pcaTextArr } from "element-china-area-data";
const emit = defineEmits(['drawerClick'])
const props = defineProps({
    refush: {
        type: Boolean,
    }
})
const state = reactive({
    indexValue: 0,
    datas: [] as any,
    headersData: [
        {
            label: "已配置",
            id: 0,
            children: []
        },
        {
            label: "投递信息",
            id: 1,
            children: [
                {
                    name: "deptId",
                    value: "",
                    label: "所属部门",
                    options: [],
                    type: "cascader",
                    dictName: "",
                    props: {
                        checkStrictly: true,
                        value: "id",
                        label: "label",
                        emitPath: false
                    }
                },
                {
                    name: "isRead",
                    value: "",
                    label: "状态",
                    options: [
                        {
                            dictValue: "0",
                            dictLabel: "未读"
                        }, {
                            dictValue: "1",
                            dictLabel: "已读"
                        }
                    ],
                    type: "select",
                    dictName: "",
                },
                {
                    name: "createTimeStart",
                    value: "",
                    label: "投递开始日期",
                    type: "dateTime",
                },
                {
                    name: "createTimeEnd",
                    value: "",
                    label: "投递结束日期",
                    type: "dateTime",
                },
                {
                    name: "initialScreeningUnqualifiedLabel",
                    value: "",
                    label: "简历标签",
                    options: [],
                    type: "select",
                    dictName: "resume_label",
                }
            ]
        },
        {
            label: "简历信息",
            id: 2,
            children: [
                {
                    name: "gender",
                    value: "",
                    label: "性别",
                    options: [],
                    type: "select",
                    dictName: "sys_user_sex",
                },
                {
                    name: "currentAddress",
                    value: "",
                    label: "目前居住地",
                    type: "cascader",
                    options: pcaTextArr,
                    props: {
                        checkStrictly: true,
                        value: 'value',   // 指定选项的 值 为选项对象的某个属性值
                        label: 'label',   // 指定选项 标签 为选项对象的某个属性值	
                        children: 'children'    //指定选项的 子选项 为选项对象的某个属性值
                    }
                },
                {
                    name: "requirementsYears",
                    value: "",
                    label: "工作经验",
                    options: [],
                    type: "select",
                    dictName: "requirements_years",
                },
                {
                    name: "jobSearchStatus",
                    value: "",
                    label: "求职状态",
                    options: [],
                    type: "select",
                    dictName: "status_of_job_hunting",
                },
                {
                    name: "lookingForwardSalary",
                    value: "",
                    label: "期望薪资",
                    options: [],
                    type: "select",
                    dictName: "salary",
                },
                {
                    name: "arrivalTime",
                    value: "",
                    label: "到岗时间",
                    options: [],
                    type: "select",
                    dictName: "arrival_time",
                },
                {
                    name: "lookingForwardIndustry",
                    value: "",
                    label: "期望从事行业",
                    options: [],
                    type: "select",
                    dictName: "company_industry",
                },
                {
                    name: "educationLevel",
                    value: "",
                    label: "学历",
                    options: [],
                    type: "select",
                    dictName: "education",
                },
                {
                    name: "schoolName",
                    value: "",
                    label: "学校名称",
                    options: [],
                    type: "input",
                    dictName: "",
                },
                {
                    name: "xuexinCoding",
                    value: "",
                    label: "学信网编码",
                    options: [],
                    type: "input",
                    dictName: "",
                },
                {
                    name: "specialFieldName",
                    value: "",
                    label: "专业",
                    options: [],
                    type: "input",
                    dictName: "",
                },
                {
                    name: "companyName",
                    value: "",
                    label: "公司名称",
                    options: [],
                    type: "input",
                    dictName: "",
                },
                {
                    name: "positionName",
                    value: "",
                    label: "担任职位",
                    options: [],
                    type: "input",
                    dictName: "",
                },
                {
                    name: "workDescription",
                    value: "",
                    label: "工作内容",
                    options: [],
                    type: "input",
                    dictName: "",
                },
                {
                    name: "selfEvaluation",
                    value: "",
                    label: "自我评价",
                    options: [],
                    type: "input",
                    dictName: "",
                },
                {
                    name: "ageGe",
                    value: "",
                    label: "最小年龄",
                    options: [],
                    type: "input",
                    dictName: "",
                }, {
                    name: "ageLe",
                    value: "",
                    label: "最大年龄",
                    options: [],
                    type: "input",
                    dictName: "",
                }, {
                    name: "isFullTimeEducation",
                    value: "",
                    label: "全日制",
                    options: [
                        {
                            dictValue: "1",
                            dictLabel: "否"
                        }, {
                            dictValue: "0",
                            dictLabel: "是"
                        },
                    ],
                    type: "select",
                    dictName: "",
                },{
                            name: "experienceEndTimeStart",
                            value: "",
                            label: "毕业开始日期",
                            type: "dateTime",
                        },
                        {
                            name: "experienceEndTimeEnd",
                            value: "",
                            label: "毕业结束日期",
                            type: "dateTime",
                        },
            ]
        },
        {
            label: "笔试",
            id: 3,
            children: [
                {
                    name: "writingTestingStatus",
                    value: "",
                    label: "笔试通知状态",
                    options: [
                        {
                            dictValue: "0",
                            dictLabel: "未通知"
                        }, {
                            dictValue: "1",
                            dictLabel: "已通知"
                        }, {
                            dictValue: "2",
                            dictLabel: "已接受"
                        }, {
                            dictValue: "-1",
                            dictLabel: "放弃笔试"
                        }
                    ],
                    type: "select",
                    dictName: "",
                },
                {
                    name: "writingTestingTimeStart",
                    value: "",
                    label: "笔试开始日期",
                    type: "dateTime",
                },
                {
                    name: "writingTestingTimeEnd",
                    value: "",
                    label: "笔试结束日期",
                    type: "dateTime",
                },
                {
                    name: "writingTestingResult",
                    value: "",
                    label: "笔试结果",
                    options: [
                        {
                            dictValue: "-1",
                            dictLabel: "无结果"
                        }, {
                            dictValue: "0",
                            dictLabel: "未通过"
                        }, {
                            dictValue: "1",
                            dictLabel: "已通过"
                        }
                    ],
                    type: "select",
                    dictName: "",
                },
                {
                    name: "socreValue",
                    value: "",
                    label: "笔试成绩",
                    options: [
                        // {
                        //   dictValue: "",
                        //   dictLabel: "全部"
                        // }, 
                        {
                            dictValue: "5",
                            dictLabel: "前5名"
                        },
                        {
                            dictValue: "10",
                            dictLabel: "前10名"
                        }, {
                            dictValue: "20",
                            dictLabel: "前20名"
                        }, {
                            dictValue: "30",
                            dictLabel: "前30名"
                        }
                    ],
                    type: "select",
                    dictName: "",
                }
            ]
        },
        {
            label: "面试",
            id: 4,
            children: [
                {
                    name: "interviewStatus",
                    value: "",
                    label: "面试通知状态",
                    options: [
                        {
                            dictValue: "0",
                            dictLabel: "未通知"
                        }, {
                            dictValue: "1",
                            dictLabel: "已通知"
                        }, {
                            dictValue: "2",
                            dictLabel: "已接受"
                        }
                    ],
                    type: "select",
                    dictName: "",
                },
                {
                    name: "interviewDateStart",
                    value: "",
                    label: "面试开始日期",
                    type: "dateTime",
                },
                {
                    name: "interviewDateEnd",
                    value: "",
                    label: "面试结束日期",
                    type: "dateTime",
                },
                {
                    name: "interviewResult",
                    value: "",
                    label: "面试结果",
                    options: [
                        {
                            dictValue: "-1",
                            dictLabel: "无结果"
                        }, {
                            dictValue: "0",
                            dictLabel: "未通过"
                        }, {
                            dictValue: "1",
                            dictLabel: "已通过"
                        }
                    ],
                    type: "select",
                    dictName: "",
                },
                {
                    name: "socreValueM",
                    value: "",
                    label: "面试成绩",
                    options: [
                        // {
                        //   dictValue: "",
                        //   dictLabel: "全部"
                        // }, 
                        {
                            dictValue: "5",
                            dictLabel: "前5名"
                        },
                        {
                            dictValue: "10",
                            dictLabel: "前10名"
                        }, {
                            dictValue: "20",
                            dictLabel: "前20名"
                        }, {
                            dictValue: "30",
                            dictLabel: "前30名"
                        }
                    ],
                    type: "select",
                    dictName: "",
                }
            ]
        },
        {
            label: "体检审查/录用",
            id: 5,
            children: [
                {
                    name: "status",
                    value: "",
                    label: "审查状态",
                    options: [
                        {
                            dictValue: "5",
                            dictLabel: "背景调查"
                        }, {
                            dictValue: "6",
                            dictLabel: "体检审查"
                        }, {
                            dictValue: "7",
                            dictLabel: "录用通知/公示"
                        }
                    ],
                    type: "select",
                    dictName: "",
                },
                {
                    name: "medicalReportStatus",
                    value: "",
                    label: "体检报告",
                    options: [
                        {
                            dictValue: "0",
                            dictLabel: "未上传"
                        }, {
                            dictValue: "1",
                            dictLabel: "已上传"
                        }
                    ],
                    type: "select",
                    dictName: "",
                },
            ]
        },
        {
            label: "入职",
            id: 6,
            children: [
                {
                    name: "onBoardTimeStart",
                    value: "",
                    label: "入职开始日期",
                    type: "dateTime",
                },
                {
                    name: "onBoardTimeEnd",
                    value: "",
                    label: "入职结束日期",
                    type: "dateTime",
                },
            ]
        },
    ] as any
})
const onButtonClick = (item) => {
    state.indexValue = item.id
    state.datas = state.headersData[state.indexValue].children
}

onMounted(() => {
    info()
})
const info = () => {
    state.indexValue = 0
    deptTreeListApi()
    state.headersData.forEach(element => {
        element.children.forEach(elements => {
            if (elements.type == 'select') {
                if (elements.dictName) {
                    elements.options = dictSect(elements.dictName)
                }
            }
        });
    })

    if (!localStorage.getItem("workTypes_web")) {
        localStorage.setItem("workTypes_web", JSON.stringify(state.headersData[0].children))
        state.datas = state.headersData[0].children
        sure()
    } else {
        state.datas = JSON.parse(localStorage.getItem("workTypes_web"))
        state.headersData[0].children = JSON.parse(localStorage.getItem("workTypes_web"))
    }
}
const add = (items) => {
    let arr = state.headersData[0].children
    let filteredArr = arr.filter(item => item.label !== items.label);
    filteredArr.push(items)
    state.headersData[0].children = filteredArr
    ElMessage.warning("已添加到已配置项中，请在已配置项中确定保存！")
}
const remove = (items) => {
    console.log(items);
    let arr = state.headersData[0].children
    let filteredArr = arr.filter(item => item.label !== items.label);
    state.headersData[0].children = filteredArr
    state.datas = state.headersData[0].children
}
const close = () => {
    emit("drawerClick")
}
const sure = () => {
    localStorage.setItem("workTypes_web", JSON.stringify(state.headersData[0].children))
    close()
}
const deptTreeListApi = async () => {
    await deptTreeList().then(res => {
        state.headersData[1].children[0].options = res.data.tree
    })
}
watch(() => props.refush, (newValue, oldValue) => {
    info()
}, { deep: true, immediate: true })
</script>

<style lang="less" scoped>
.borders {
    padding: 0px;
    border-bottom: 1px solid gainsboro;
}

.drawer_mains {
    padding: 16px 16px 100px 16px;
}

.marginBottom16 {
    margin-bottom: 16px;
}

.marginLeft16 {
    margin-left: 16px;
}

.footer_darwer {
    width: 640px;
    position: fixed;
    bottom: 0;
    padding: 20px;
    background-color: #fff;
    z-index: 99;
}
</style>